<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="inc/js.jsp"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户详情</title>
    <jsp:include page="inc/css.jsp"/>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <jsp:include page="inc/menu.jsp"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="margin-top: 10px">
                        <!-- /.card-header -->
                        <div class="card-header">
                            <a href="backend/user/index" class="btn btn-outline btn-info" role="button">返回列表</a>
                            <a href="javascript:void(0)" style="margin-left: 5px;" onclick="_userInfo.fn.subInfo()" class="btn btn-success" role="button">保存</a>
                        </div>
                        <div class="card-body">
                            <form id="infoForm" method="post" action="backend/user/save" class="form-group" role="form" enctype="multipart/form-data">
                                <input type="hidden" name="id" value="${user.id}"/>
                                <input type="hidden" id="tempDepartmentId" value="${user.department.id}"/>

                                <div style="position: absolute; top: 120px; right: 60px;">
                                    <input type="file" name="mainImage" accept="image/*" id="mainImage" style="display:none;"/>
                                    <a href="javascript:void(0);" onclick="_userInfo.fn.AddImg()">
                                        <img id="mainPicture" src="<c:if test='${user.avatar != null}'>${user.avatar}</c:if><c:if test='${user.avatar == null}'>${defaultUserAvatar}</c:if>" height="250px" width="250px" style="border: 1px solid black"/>
                                    </a>
                                </div>

                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">账号:</label>

                                    <div class="col-sm-8">
                                        <input style="width: 50%" type="text" class="form-control" id="account" name="account" maxlength="20" value="${user.account}" placeholder="请输入账号"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">姓名:</label>

                                    <div class="col-sm-8">
                                        <input style="width: 50%" type="text" class="form-control" id="name" name="name" maxlength="20" value="${user.name}" placeholder="请输入姓名"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">手机号:</label>

                                    <div class="col-sm-8">
                                        <input style="width: 50%" type="text" class="form-control" id="mobile" name="mobile" maxlength="20" value="${user.mobile}" placeholder="请输入手机号"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">密码:</label>

                                    <div class="col-sm-8">
                                        <input style="width: 50%" type="password" class="form-control" id="password" name="password" maxlength="20" value="${user.password}" placeholder="请输入密码"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">性别:</label>

                                    <div class="col-sm-8" style="padding-top: 6.5px;width: 50%">
                                        <input type="radio" name="sex" value="0" <c:if test="${user.sex == 0 || user.sex == null }">checked</c:if>/>男&nbsp;&nbsp;
                                        <input type="radio" name="sex" value="1" <c:if test="${user.sex == 1 }">checked</c:if>/>女
                                    </div>
                                </div>
                                <br/>
                                <div class="form-inline">
                                    <label class="col-sm-2 control-label">所属部门:</label>

                                    <div class="col-sm-8">
                                        <select id="departmentList" name="departmentId" style="width: 200px;" class="form-control">
                                            <option value="">请选择部门</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
</div>
<!-- ./wrapper -->

<!-- page script -->
<script type="text/javascript">
    var _userInfo = {
        v: {
            list: [],
            dTable: null,
            date: null
        },
        fn: {
            init: function () {
                // 图片即时预览
                $("#mainImage").uploadPreview({
                    Img: "mainPicture",
                    Width: 200,
                    Height: 170
                });

                _userInfo.fn.getDepartmentList();
            },
            subInfo: function () {
                var flag = true;
                var account = $('#account').val();
                var name = $('#name').val();
                var mobile = $('#mobile').val();
                var password = $('#password').val();
                var departmentId = $('#departmentList option:selected').val();

                if (null == account || account == '') {
                    info("error", "请输入账号");
                    flag = false;
                    return;
                }

                if (null == name || name == '') {
                    $safe.notify("请输入姓名", "error");
                    info("error", "请输入账号");
                    flag = false;
                    return;
                }

                if (null == mobile || mobile == '') {
                    info("error", "请输入手机号");
                    flag = false;
                    return;
                }

                if (null == password || password == '') {
                    info("error", "请输入密码");
                    flag = false;
                    return;
                }

                if (null == departmentId || departmentId == '') {
                    info("error", "请选择部门");
                    flag = false;
                    return;
                }

                // 所有的验证通过后，执行新增操作
                if (flag) {
                    $("#infoForm").ajaxSubmit({
                        url: "backend/user/save",
                        dataType: "json",
                        success: function (result) {
                            if (result == 1) {
                                info("success", "用户信息保存成功");
                            } else if (result == -1) {
                                info("error", "该账号名已被占用");
                            } else if (result == -2) {
                                info("error", "该姓名已被占用");
                            } else if (result == -3) {
                                info("error", "该手机号已被占用");
                            } else {
                                info("error", "服务器故障，请联系管理员");
                            }
                        }
                    });
                }
            },
            AddImg: function () {
                // a标签绑定onclick事件
                $('#mainImage').click();
            },
            getDepartmentList: function () {
                var departmentId = $('#tempDepartmentId').val();

                $safe.ajax("common/departmentList", null, function (result) {
                    if (null != result) {
                        var content = "";
                        jQuery.each(result, function (i, item) {
                            if (null != departmentId && departmentId != '' && departmentId == item.id) {
                                content += "<option value='" + item.id + "' selected>" + item.name + "</option>";
                            } else {
                                content += "<option value='" + item.id + "'>" + item.name + "</option>";
                            }
                        });
                        $('#departmentList').append(content);
                    } else {
                        info("error", "服务器故障，请联系管理员");
                    }
                });
            }
        }
    };

    $(document).ready(function () {
        _userInfo.fn.init();

        window.onload = function () {
            checkSelectMenu('userLi');

            loadMenuColor('userLi');
        }
    });

</script>
</body>
</html>